import React from 'react';

const {
    View,
    ListView,
    StyleSheet,
    Text
} = require('react-native');
const {
    JDScrollView,
    JDText,
    JDButton,
    JDTouchable,
    JDScrollTabView,
    JDRouter,
    JDImage
} = require('@areslabs/jdreact-core-lib');
const {ScrollTabView, ScrollTabBar, DefaultTabBar} = JDScrollTabView
const {NavigationBar} = JDRouter;

function getMockData() {
    let result = [];
    for (let i = 0; i < 100; i++) {
        result.push(`Hello ${parseInt(Math.random() * 10000)}`);
    }
    return result;
}

class JDTabView extends React.Component {
    constructor(props) {
        super(props);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
            isRefreshing: false,
            listData: getMockData(),
        };
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <NavigationBar Title="ScrollTabBar"/>
                <ScrollTabView
                    tabBarPosition="top"
                    initialPage={1}
                    preLoad={false}
                    ref={(tabView) => {
                        this.tabView = tabView;
                    }}
                    //指定此属性，使得choseLabel组件被选中时展示
                    tabIsComponent={true}
                    renderTabBar={() => {
                        return <ScrollTabBar
                            style={{height: 50}}
                            tabStyle={{paddingLeft:10,paddingRight:10, height: 50}}
                            underlineStyle={{
                                position: 'absolute',
                                height: 2,
                                backgroundColor: '#000',
                                bottom: 0,
                            }}
                            activeTextColor='#000'
                        />
                        // return <DefaultTabBar/>
                    }}
                    onChangeTab={this.onChangeTab}
                    onScroll={this.onScroll}
                >
                    <View tabLabel={<JDImage
                        source={{uri: 'https://img30.360buyimg.com/njmobilecms/jfs/t27352/30/118296452/8790/33a63058/5b8607fdN5ae2319b.png'}}
                        style={styles.image}/>}
                          style={styles.wrapper}>
                        <ListView
                            style={styles.wrapper}
                            contentContainerStyle={styles.contentContainerStyle}
                            dataSource={this.ds.cloneWithRows(this.state.listData)}
                            renderRow={this._renderRow}
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => {
                                this.onRefresh();
                            }}
                            initialListSize={5}
                            pageSize={5}
                            renderScrollComponent={(props) => (<JDScrollView {...props} />)}
                        />
                    </View>
                    <Text tabLabel={'#2'}>Tab #2</Text>
                    <View tabLabel={<JDImage
                        source={{uri: 'https://img30.360buyimg.com/njmobilecms/jfs/t27502/1/125572654/6353/5d2df111/5b8607eaN7e044660.png'}}
                        style={styles.image}/>} chosenLabel={<JDImage
                        source={{uri: 'https://img30.360buyimg.com/njmobilecms/jfs/t27352/30/118296452/8790/33a63058/5b8607fdN5ae2319b.png'}}
                        style={styles.image}/>}>
                        <JDButton onPress={() => {
                            this.tabView.goToPage(0)
                        }}>
                            <JDText>回到首页</JDText>
                        </JDButton>
                    </View>
                    <Text tabLabel='Tab 4'>Tab #4</Text>
                    <View tabLabel='Tab #5'>
                        <JDButton onPress={() => {
                            this.tabView.goToPage(0)
                        }}>
                            <JDText>回到首页</JDText>
                        </JDButton>
                    </View>
                    <Text tabLabel='#6'>Tab #6</Text>
                    <View tabLabel='Tab #7'>
                        <JDButton onPress={() => {
                            this.tabView.goToPage(0)
                        }}>
                            <JDText>回到首页</JDText>
                        </JDButton>
                    </View>

                </ScrollTabView>
            </View>
        )


    }

    _renderRow = (rowData) => {
        return (
            <JDTouchable contentContainerStyle={styles.row} onPress={() => {
                alert(rowData);
            }}>
                <JDText>{rowData}</JDText>
            </JDTouchable>
        );
    };

    onRefresh = () => {
        this.setState({
            isRefreshing: true,
        });
        setTimeout(() => {
            this.setState({
                isRefreshing: false,
                listData: getMockData()
            });
        }, 3000);
    };

    onChangeTab = ({i, ref, from}) => {
        // console.warn(i)
        // console.log(ref)
        // console.log(from)
    };

    onScroll = (scrollValue) => {
        // console.log(`scrollValue:${scrollValue}`)
    };
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    contentContainerStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.1)',
    },
    row: {
        height: 100,
        borderColor: '#F00',
        borderWidth: 1,
        marginVertical: 10,
    },
    image: {
        width: 40,
        height: 40,
        resizeMode: 'contain',
        borderTopLeftRadius: 50,
        borderTopRightRadius: 50,
    }
});

module.exports = JDTabView;